import { FC } from "react";

import { Form, Input, Button, Space } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";

const FormWrapper = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .login_form {
    width: 400px;
    .login_forgot {
      float: right;
    }
    .captcha {
      right: 0;
      height: 100%;
      position: absolute;
    }
  }
`;
const Register: FC = () => {
  const submit = () => {};
  const navigate = useNavigate();
  return (
    <>
      <FormWrapper className="login">
        <Form
          className="login_form"
          initialValues={{ remember: true }}
          layout="vertical"
          onFinish={submit}>
          <Form.Item
            name="username"
            rules={[
              { required: true, message: "用户名不能为空" },
              { min: 2, message: "用户名必须大于1位", warningOnly: true },
            ]}>
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              { required: true, message: "请输入密码" },
              { min: 3, message: "密码必须大于2位", warningOnly: true },
            ]}>
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>

          <Form.Item
            name="confirmPassword"
            rules={[
              {
                required: true,
                message: "请输入密码",
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error("两次密码不一致"));
                },
              }),
            ]}>
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit" className="login-form-button">
                注册
              </Button>
              <Button
                onClick={() => navigate("/user/login")}
                type="primary"
                className="login-form-button">
                去登录
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </FormWrapper>
    </>
  );
};

export default Register;
